<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>点线面图形显示</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"/>
    <script src="https://js.arcgis.com/4.18/"></script>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <script>
        require(["esri/Map", "esri/views/MapView", "esri/Graphic"], function (
            Map, MapView, Graphic) {
            let map = new Map({
                basemap: "hybrid"
            });

            let view = new MapView({
                center: [-80, 35],
                container: "viewDiv",
                map: map,
                zoom: 3
            });


            //(点)创建图形并向其添加几何图形和符号
            let pointGraphic = new Graphic({
                geometry: {
                    type: "point", // autocasts as new Point()
                    longitude: -49.97,
                    latitude: 41.73
                },
                symbol: {
                    type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
                    color: [226, 119, 40],
                    outline: {
                        // autocasts as new SimpleLineSymbol()
                        color: [255, 255, 255],
                        width: 2
                    }
                }
            });

            //(线)创建一个新图形并向其添加几何图形、符号和属性。您还可以向图形添加一个简单的 PopupTemplate。这允许用户在单击时查看图形的属性。
            let polylineGraphic = new Graphic({
                geometry: {
                    type: "polyline", // autocasts as new Polyline()
                    paths: [
                        [-111.3, 52.68],
                        [-98, 49.5],
                        [-93.94, 29.89]
                    ]
                },
                symbol: {
                    type: "simple-line", // autocasts as SimpleLineSymbol()
                    color: [226, 119, 40],
                    width: 4
                },
                //创建一个对象来存储与线相关的属性
                attributes: {
                    Name: "Keystone Pipeline",
                    Owner: "TransCanada",
                    Length: "3,456 km"
                },
                popupTemplate: {
                    // autocasts as new PopupTemplate()
                    title: "{Name}",
                    content: [
                        {
                            type: "fields",
                            fieldInfos: [
                                {
                                    fieldName: "Name"
                                },
                                {
                                    fieldName: "Owner"
                                },
                                {
                                    fieldName: "Length"
                                }
                            ]
                        }
                    ]
                }
            });

            //(面)创建多边形图形,将几何图形和符号添加到新图形
            let polygonGraphic = new Graphic({
                geometry: {
                    type: "polygon", // autocasts as new Polygon()
                    rings: [
                        [-64.78, 32.3],
                        [-66.07, 18.45],
                        [-80.21, 25.78],
                        [-64.78, 32.3]
                    ]
                },
                symbol: {
                    type: "simple-fill", // autocasts as new SimpleFillSymbol()
                    color: [227, 139, 79, 0.8],
                    outline: {
                        // autocasts as new SimpleLineSymbol()
                        color: [255, 255, 255],
                        width: 1
                    }
                }
            });

            //将图形添加到视图的图形层
            view.graphics.addMany([pointGraphic, polylineGraphic, polygonGraphic]);
        });
    </script>
</head>

<body>
<div id="viewDiv"></div>
</body>
</html>
